<template>
	<view class="grab-order">
		<uv-navbar placeholder title="抢单列表" left-icon=""></uv-navbar>
		<view class="content">
			<view class="list" v-if="list.length">
				<view class="item" v-for="(item, index) in list" :key="index" @click="handleToDetails(item)">
					<view class="top">
						<view class="distance">距您{{ item.distance.km }}公里</view>
						<view class="wait">已经等候{{ getWaitTime(item.employment_time) }}</view>
					</view>
					<view class="center">
						<view class="date">
							<uv-text
								prefix-icon="more-circle-fill"
								:icon-style="{ marginRight: '10px' }"
								:text="dayjs(item.employment_time).format('YYYY-MM-DD')"
							></uv-text>
						</view>
						<view class="dot name">
							<uv-text :text="item.job_type_id[0] && item.job_type_id[0].name"></uv-text>
						</view>
						<view class="dot address">
							<uv-text :text="item.address" lines="1"></uv-text>
						</view>
					</view>
					<view class="bottom">
						<view class="amount">
							<text>预估价格：</text>
							<text class="offer">￥{{ item.offer }}起</text>
						</view>
						<view class="bottom">
							<uv-button text="查看订单" type="primary" shape="circle"></uv-button>
						</view>
					</view>
				</view>
			</view>
			<uv-empty v-else text="暂无订单"></uv-empty>
		</view>
	</view>
</template>

<script setup>
import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import { ref } from "vue";
import dayjs from "dayjs";
import getWaitTime from "../../utils/get-wait-time";
import getDistances from "../../utils/get-distances";
import loadingCallback from "../../utils/loading-callback";

const db = uniCloud.database();

const locationInfo = ref();

const list = ref([]);

// 获取坐标
const handleGetLocation = () => {
	return new Promise((resolve, reject) => {
		// #ifdef APP || MP-WEIXIN
		uni.getLocation({
			type: "wgs84",
			isHighAccuracy: true,
			success: (result) => {
				locationInfo.value = result;
				resolve(result);
			},
			fail: (err) => {
				reject(err);
			}
		});
		// #endif
		// #ifdef H5
		resolve();
		// #endif
	});
};

const handleGetOrderList = async () => {
	const order = db.collection("order").orderBy("employment_time desc").getTemp();
	const response = await db.collection(order, "job-type").get();
	console.log(response);
	if (response.result.errCode == 0) {
		response.result.data.forEach((i) => {
			if (locationInfo.value) {
				const distance = getDistances(
					locationInfo.value.latitude,
					locationInfo.value.longitude,
					i.latitude,
					i.longitude
				);
				i.distance = distance;
			}
		});
		list.value = response.result.data;
		console.log(list.value);
	}
};

const handleToDetails = (item) => {
	uni.navigateTo({
		url: `/pages/grab-order-details/grab-order-details?orderId=${item._id}`
	});
};

onPullDownRefresh(() => {
	loadingCallback(async () => {
		await handleGetLocation();
		await handleGetOrderList();
		uni.stopPullDownRefresh();
	});
});

onShow(() => {
	loadingCallback(async () => {
		await handleGetLocation();
		await handleGetOrderList();
	});
});
</script>

<style lang="scss" scoped>
.grab-order {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #f7f7f7;

	.content {
		padding: 20px;
		flex: 1;

		.list {
			.item {
				background-color: #ffffff;
				margin-bottom: 20px;
				border-radius: 10px;
				padding: 20px;
				box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);

				&:active {
					filter: brightness(0.9);
					box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
				}

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10px;
				}

				.center {
					margin-bottom: 10px;

					.date {
						margin-bottom: 5px;
					}

					.dot {
						display: flex;
						align-items: center;
						margin-bottom: 5px;

						&:before {
							content: "";
							display: block;
							width: 15px;
							height: 15px;
							border-radius: 50%;
							margin-right: 10px;
						}

						&.name {
							&:before {
								background-color: #33cc66;
							}
						}

						&.address {
							&:before {
								background-color: #e50f0f;
							}
						}
					}
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.amount {
						.offer {
							color: $uni-color-success;
						}
					}
				}
			}
		}
	}
}
</style>
